<#assign propsJson="${propsJson}"?eval />
<template>
  <div class="box" style="justify-content: ${propsJson.fontalign}">
    <div>
      <p
        :style="numStyle"
      >
        ${propsJson.dataFonttext}
      </p>
       <p
        :style="titleStyle"
        style="margin-top:30px"
      >${propsJson.titleFonttext}</p> 
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      numStyle: {
        color: '${propsJson.dataFontcolor}',
        fontSize: ${propsJson.dataFontsize?c} + 'px',
        fontWeight: '${propsJson.dataFontstyle?seq_contains("bold")?string("bold", "normal")}',
        fontStyle: '${propsJson.dataFontstyle?seq_contains("italic")?string("italic", "normal")}',
        textDecoration: '${propsJson.dataFontstyle?seq_contains("underline")?string("underline", "none")}'
      },
      titleStyle: {
        color: '${propsJson.titleFontcolor}',
        fontSize: ${propsJson.titleFontsize?c} + 'px',
        fontWeight: '${propsJson.titleFontstyle?seq_contains("bold")?string("bold", "normal")}',
        fontStyle: '${propsJson.titleFontstyle?seq_contains("italic")?string("italic", "normal")}',
        textDecoration: '${propsJson.titleFontstyle?seq_contains("underline")?string("underline", "none")}'
      }
    }
  }
};
</script>

<style lang='less' scoped>
.box {
  display: flex;
  align-items: center;
  text-align: center;
  height: 100%;
  justify-content: center;
}
</style>
